<template>
  <a-textarea
    :class="className"
    :autoFocus="autoFocus"
    :placeholder="placeholderLanguageText"
    @blur="onblur"
    @focus="onfocus"
    :autoSize="autoSize"
    :value="value"
    @input="onChange"
    :style="bodyStyle"
    @keyup="e => $emit('keyup', e)"
    @keydown="e => $emit('keydown', e)"
  />
</template>

<script>
import zhCN from '../locale/zh-cn';

export default {
  name: 'DTextarea',
  props: {
    autoFocus: {
      type: Boolean,
      default: false
    },
    autoSize: {
      type: [Boolean, Object],
      default: true
    },
    className: {
      type: String,
      default: 'text_content'
    },
    bodyStyle: {
      type: String,
      default: 'min-height:48px;resize:none;outline: none;'
    },
    placeholder: {
      type: String
    },
    value: {
      type: String,
      default: ''
    }
  },
  inject: {
    dLocaleData: {
      default: zhCN.locale
    }
  },
  computed: {
    placeholderLanguageText() {
      if (this.placeholder) {
        return this.placeholder;
      }
      return this.dLocaleData.textarea.placeholder;
    }
  },
  methods: {
    onblur() {
      this.$emit('blur');
    },
    onfocus() {
      this.$emit('focus');
    },
    onChange(e) {
      this.$emit('change', e.target.value);
      this.$emit('update:value', e.target.value);
    }
  }
};
</script>

<style lang="scss" scoped>
.text_content {
  width: 100%;
  border: 1px solid #ddd;
  padding: 10px 30px 10px 10px;
  font-size: 12px;
  color: #333;
  line-height: 24px;
}
.text_content:focus {
  width: 100%;
  border: 1px solid #ddd;
  padding: 10px 30px 10px 10px;
  outline: none;
  box-shadow: none;
  font-size: 12px;
  color: #333;
  border-radius: 0;
  line-height: 24px;
}
</style>
